<template>
<div class="cont" v-if="jsonData">
  <el-row>
    <el-col :span="24">
      <el-tabs  v-model="activeModel" @tab-click="handleClick">
        <el-tab-pane label="太阳井高地" name="7">
        </el-tab-pane>
        <el-tab-pane label="黑暗神殿" name="6">
        </el-tab-pane>
        <el-tab-pane label="海加尔山" name="5">
        </el-tab-pane>
        <el-tab-pane label="风暴要塞" name="4">
        </el-tab-pane>
        <el-tab-pane label="毒蛇神殿" name="3">
        </el-tab-pane>
        <el-tab-pane label="格鲁尔" name="2">
        </el-tab-pane>
        <el-tab-pane label="玛瑟里顿" name="1">
        </el-tab-pane>
        <el-tab-pane label="卡拉赞" name="0">
        </el-tab-pane>
        <el-tab-pane label="自定义模版" name="custom">
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
  <div class="gRelative" style="position:relative;background-color:#fff;width:1000px;">
    <!--img begin-->
    <div ref="imageTofile" :class="toSaveImg ? ['gMain','toSaveImg']:['gMain']">
      <img class="sy_logo" src="../assets/logo_sy.png">
      <img class="sy_logo" src="../assets/logo_sy.png" style="top:800px;">
      <el-row class="headerTip">
        <el-col :span="6">雷德「炉石」公会</el-col>
        <el-col :span="6">YY：64766789</el-col>
        <el-col :span="6">直播：B站12861</el-col>
        <el-col :span="6">日期：{{nowDate}}</el-col>
      </el-row>
      <el-row class="headerTip" v-if="toolBarShow">
        <el-col :span="24">
          <el-button @click="beizhuShow=!beizhuShow" type="primary" icon="el-icon-edit">添加备注</el-button>
          <el-button @click="ewaiShow=true;addEW()" type="success" icon="el-icon-circle-plus-outline">额外掉落</el-button>
          <el-button @click="buzhuShow=true;addBZ();" type="primary">添加补助</el-button>
          <el-button type="warning" @click="fakuanShow=true;addFK()">添加罚款</el-button>
        </el-col>
      </el-row>
      <el-form label-width="120px">
        <el-form-item label="备注" v-if="beizhuShow">
          <div class="lootItem beizhu">
            <el-input v-if="toolBarShow" type="textarea" :autosize="{minRows:1}" v-model="beizhu"></el-input>
            <span v-show="!toolBarShow" v-html="beizhu"></span>
          </div>
        </el-form-item>
        <template v-if="buzhuShow">
          <div class="formTit"><b>补助详情</b></div>
          <el-form-item label="" >
            <div class="lootItem" style="margin-bottom:10px;" v-for="(item,index) in bz" v-bind:key="index">
              <el-input style="width:50%" placeholder="补助事项" v-model="item.name" ></el-input><span style="display:inline-block;width:2%;"></span>
              <el-input style="width:30%" v-model="item.gold" @blur="handleGoldChange"></el-input><span style="display:inline-block;width:2%;"></span>
              <el-button v-if="toolBarShow" type="info" size="mini" icon="el-icon-delete" @click="removeBZ(index)"></el-button>
            </div>
          </el-form-item>
        </template>
        <template v-if="fakuanShow">
          <div class="formTit yellow"><b>罚款详情</b></div>
          <el-form-item label="" >
            <div class="lootItem" style="margin-bottom:10px;" v-for="(item,index) in fk" v-bind:key="index">
              <el-input style="width:50%" placeholder="罚款事项" v-model="item.name" ></el-input><span style="display:inline-block;width:2%;"></span>
              <el-input style="width:30%" v-model="item.gold" @blur="handleGoldChange"></el-input><span style="display:inline-block;width:2%;"></span>
              <el-button v-if="toolBarShow" type="info" size="mini" icon="el-icon-delete" @click="removeFK(index)"></el-button>
            </div>
          </el-form-item>
        </template>
        <div v-if="jsonData.Ghelper[activeModel] && jsonData.Ghelper[activeModel].length > 0" class="formTit"><b>掉落详情</b></div>
        <el-form-item :label="item.bossName" v-for="item in jsonData.Ghelper[activeModel]" v-bind:key="item.bossName">
          <div class="lootItem" style="margin-bottom:10px;" v-for="bossLoot in item.tierNum" v-bind:key="'t'+bossLoot">
            <el-select v-model="item.loot[bossLoot-1]" placeholder="套装部位">
              <el-option
                v-for="tierItem in tierGroup"
                :key="tierItem"
                :label="'套装：【'+item.tierLabel+'】'+tierItem"
                :value="'套装：【'+item.tierLabel+'】'+tierItem">
              </el-option>
            </el-select><span style="display:inline-block;width:2%;"></span>
            <el-input placeholder="售价" step="1" style="width:40%" v-model="item.gold[bossLoot-1]" @blur="handleGoldChange"></el-input>
          </div>
          <div class="lootItem" style="margin-bottom:10px;" v-for="bossLoot in item.lootNum" v-bind:key="bossLoot">
            <el-input placeholder="装备名" style="width:50%" v-model="item.loot[item.tierNum + bossLoot-1]" ></el-input><span style="display:inline-block;width:2%;"></span>
            <el-input placeholder="售价" step="1" style="width:40%" v-model="item.gold[item.tierNum + bossLoot-1]" @blur="handleGoldChange"></el-input>
          </div>
        </el-form-item>
        <template v-if="ewaiShow">
          <div class="formTit"><b>额外掉落</b></div>
          <el-form-item label="" >
            <div class="lootItem" style="margin-bottom:10px;" v-for="(item,index) in ew" v-bind:key="index">
              <el-input style="width:50%" placeholder="掉落名" v-model="item.name" ></el-input><span style="display:inline-block;width:2%;"></span>
              <el-input style="width:30%" v-model="item.gold" @blur="handleGoldChange"></el-input><span style="display:inline-block;width:2%;"></span>
              <el-button v-if="toolBarShow" type="info" size="mini" icon="el-icon-delete" @click="removeEW(index)"></el-button>
            </div>
          </el-form-item>
        </template>
        <el-row class="total" style="padding:0 20px;">
          <el-col  :span="8">
            <el-form-item label="人数" style="border:0;">
                <el-input style="width:50px" v-model="totalPeople" @blur="handleGoldChange"></el-input>
            </el-form-item>
          </el-col>
          <el-col style="color:#f56c6c;font-size:20px;font-weight:bold;line-height:40px;" :span="6">总计：{{totalGold}} G</el-col>
          <el-col style="color:#f56c6c;font-size:20px;font-weight:bold;line-height:40px;" :span="10">人均（抹零）：{{perGold}} G / 每小队：{{perGold * 5}} G</el-col>
        </el-row>
      </el-form>
    </div>
    <!--img end-->
    <img class="saveImg" :src="htmlUrl" v-show="htmlUrl" />
  </div>
  <button v-if="!htmlUrl" class="saveBtn" @click="toImage">保存</button>
  <button v-else class="saveBtn" @click="htmlUrl='';toolBarShow=true">编辑</button>
</div>
</template>

<script>
import html2canvas from "html2canvas"
import { Loading } from 'element-ui';
let Datas = require('../assets/datas.json')
export default {
  name: 'goldHelper',
  data() {
    return {
      jsonData: null,
      htmlUrl: "", //html2canvas 图片url
      activeModel: '7',
      totalGold: 0,
      perGold: 0,
      totalPeople: 0,
      nowDate:'',
      toolBarShow: true,
      beizhu: '',
      beizhuShow: false,
      buzhuShow: false,
      fakuanShow: false,
      ewaiShow: false,
      bz:[], // 补助
      fk:[], // 罚款
      ew:[], // 额外掉落
      tierGroup:[], //套装分组
      toSaveImg: false,
    }
  },
  mounted() {
    let _this = this
    // this.jsonData = Datas
    _this.dataInit(Datas)
    _this.nowDate = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()
    if (parseInt(_this.activeModel) <= 4) {
      _this.tierGroup = ["战牧德","猎法术","贼骑萨"]
    }else {
      _this.tierGroup = ["战猎萨","骑牧术","贼法德"]
    }
  },
  methods: {
    dataInit(data){
      let _this = this
      let _data = data
      for (let key in _data.Ghelper) { // 模板
        for (let item in _data.Ghelper[key]){ // boss
          // console.log('item',_data.Ghelper[key][item])
          for (let i = 0; i < _data.Ghelper[key][item].lootNum + _data.Ghelper[key][item].tierNum; i++) {
            _data.Ghelper[key][item].gold[i] = 0
            _data.Ghelper[key][item].loot[i] = ''
          }
        }
      }
      // console.log(_data)
      _this.jsonData = _data
      _this.totalPeople = _this.activeModel == '0' || _this.activeModel == 'zam' ? 10 : 25
    },
    //html2canvas方法
    toImage() {
      let _this = this
      // 先计算一遍
      _this.handleGoldChange()
      _this.toolBarShow = false
      let loadingInstance = Loading.service();
      document.body.scrollIntoView();
      // 修改样式
      _this.toSaveImg = true
      // 然后生成
      setTimeout(()=>{
        html2canvas(_this.$refs.imageTofile, {
          backgroundColor: "#fff"
        }).then((canvas) => {
          setTimeout(()=>{
            loadingInstance.close();
            let url = canvas.toDataURL("image/png");
            _this.htmlUrl = url;
            this.$message({
              message: '图片生成成功，可以右键复制到微信群啦',
              type: 'success'
            });
            _this.toSaveImg = false
          },500)
        });
      },300)
    },
    handleClick() {
      let _this = this
      console.log(this.activeModel)
      _this.totalPeople = _this.activeModel == '0' || _this.activeModel == 'zam' ? 10 : 25
      if (parseInt(_this.activeModel) <= 4) {
        _this.tierGroup = ["战牧德","猎法术","贼骑萨"]
      }else {
        _this.tierGroup = ["战猎萨","骑牧术","贼法德"]
      }
      _this.handleGoldChange()
    },
    handleGoldChange(){
      let _this = this
      let _gold = 0
      // for (let key in _this.jsonData.Ghelper) { // 模板
        // console.log(_this.activeModel)
        for (let item in _this.jsonData.Ghelper[_this.activeModel]){ // boss
          for (let i = 0; i < _this.jsonData.Ghelper[_this.activeModel][item].lootNum + _this.jsonData.Ghelper[_this.activeModel][item].tierNum; i++) {
            let _temp = parseInt(_this.jsonData.Ghelper[_this.activeModel][item].gold[i]) || 0
            _gold = _gold + _temp
          }
        }
      // }
      for (let key in _this.fk) { //+罚款
        let _temp = parseInt(_this.fk[key].gold)
        _gold = _gold + _temp
      }
      for (let key in _this.bz) { //-补助
        let _temp = parseInt(_this.bz[key].gold)
        _gold = _gold - _temp
      }
      for (let key in _this.ew) { //+额外
        let _temp = parseInt(_this.ew[key].gold)
        _gold = _gold + _temp
      }
      _this.totalGold = _gold
      _this.perGold = Math.floor(_this.totalGold / _this.totalPeople)
    },
    addBZ(){
      let _this = this
      _this.bz.push({'name':'','gold':0});
      console.log(_this.bz)
    },
    removeBZ(index){
      this.bz.splice(index,1)
      this.handleGoldChange()
      if (this.bz.length == 0){
        this.buzhuShow = false
      }
    },
    addFK(){
      let _this = this
      _this.fk.push({'name':'','gold':0});
    },
    removeFK(index){
      this.fk.splice(index,1)
      this.handleGoldChange()
      if (this.fk.length == 0){
        this.fakuanShow = false
      }
    },
    addEW(){
      let _this = this
      _this.ew.push({'name':'','gold':0});
    },
    removeEW(index){
      this.ew.splice(index,1)
      this.handleGoldChange()
      if (this.ew.length == 0){
        this.ewaiShow = false
      }
    },
  }
}
</script>
<style>
.clearfix:after {content: ".";display: block;font-size: 0;height: 0;line-height: 0;overflow: hidden;visibility: hidden;clear: both;}
.clearfix {*display: table;*zoom: 1;}
.cont {
  color: #fff;
  font-size: 18px;
}
.el-tabs__item{color: #fff;}
.gMain{color: #333;min-height: 400px;margin-bottom: 20px;position: relative;padding-top: 20px;padding-bottom: 20px;box-sizing: border-box;z-index: 1;overflow: hidden;}
.saveBtn{transition: all 1s;border: 0;outline: 0;position: fixed;right: 20px;bottom: 100px;width: 50px;height: 50px;border-radius: 100%;background-color: #67c23a;color: #fff;text-align: center;line-height: 50px;font-size: 14px;cursor: pointer;z-index: 11;}
.saveBtn:hover{background-color: #66b1ff;}
.saveImg{position: absolute;z-index: 10;top: 0;left: 0;bottom: 0;right: 0;}
.lootItem{width: 50%;display: inline-block;}
.el-form-item{border-bottom: 1px solid #eee;margin-left: 20px;margin-right: 20px;}
.el-form-item__label{text-align: left;}
.total{background-color: rgba(255,255,255,0.8);}
.total .el-form-item__label{width: 40px !important;}
.total .el-form-item__content{margin-left: 40px !important;}
.total .el-form-item{margin-bottom: 0;}
.sy_logo{position: absolute;z-index: -1;width: 80%;transform: rotate(23deg);top: 200px;left: 10%;}
.headerTip{box-sizing:border-box;padding:0 20px;margin-bottom:20px;color: rgb(57, 70, 86);font-weight: bold;font-size: 20px;}
.beizhu{margin-bottom:10px;line-height:24px;background:rgba(255,255,255,0.7);border:1px solid #DCDFE6;border-radius:4px;padding:3px 15px;}
.beizhu .el-textarea__inner{outline:0;border:0;padding:0;}
.formTit{box-sizing: border-box;margin-left: 20px;margin-right:20px;display: block;margin-bottom: 10px;position: relative;border-bottom: 1px solid #eee;}
.formTit b{display: inline-block;font-weight: bold;color: #409EFF;font-size: 20px;border-bottom: 3px solid #409EFF;padding-bottom: 5px;}
.formTit.yellow b{color: #e6a23c;border-color: #e6a23c;}

.el-textarea__inner,.el-input__inner{background-color: rgba(255,255,255,0.7);}
.el-input--suffix .el-input__inner{padding-right: 24px;}
.toSaveImg .el-icon-arrow-up:before{content:none;}
/* .el-input__inner,.beizhu{box-shadow:2px 2px 5px #969696;} */
</style>
